<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
    <title>全一智慧安防平台</title>
    <link Rel="SHORTCUT ICON" href="/pc/login/img/head_logo.png">
    <script src="/pc/login/js/jquery.min.js" type="text/javascript"></script>
    <script src="/pc/login/js/jquery.slider.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="/pc/login/css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="/pc/login/css/demo.css" />
    <!--必要样式-->
    <link rel="stylesheet" type="text/css" href="/pc/login/css/component.css" />
    <link rel="stylesheet" href="/pc/login/css/index.css">
    <link href="/pc/login/css/jquery.slider.css" rel="stylesheet" type="text/css"/>
    <style>
        input, button, select, textarea {
            outline: none;
            border: 0;
        }

        input:hover{
            background-color:rgba(255,255,255,0.8) !important ;
            color: #8B8B78;
        }
        #pn11,select,li:hover{
            cursor:pointer;
        }

        button,input{
            border-radius: .7rem;
            height: 3em;
            -webkit-transition: all 300ms ease;
            transition: all 500ms ease;
            width: 25rem;
            color: white;
            outline: none;
        }
        button{
            border: 0 !important;
        }
        .hide{
            display: none;
        }
        .ys{
            color:#B0B0B0;
        }

    </style>
</head>
<body>
<div class="container demo-1">
    <div class="z1">
        <div id="large-header" class="large-header">
            <canvas id="demo-canvas"></canvas>
            <div class="logo_box" id="dv2">
                <div class="z2">
                    <h3 style="font-weight: bold;font-size: 2.5em;position: absolute;bottom: 11.5em;right: 1.4em;"">全一智慧安防平台</h3>
                    <ul  id="qh" style="overflow: hidden;margin-bottom: 1em;margin-right: 3em">
                        <li  id="dl2"  style="width: 50%;float: left; text-align: center;font-size: 1.2em; ">登陆</li>
                        <li  id="wj2" class="ys" style="width:50%;text-align: center;float: left; font-size: 1.2em;">忘记密码</li>
                    </ul>
                </div>
                <div id="dq">
                    <!-- 登陆表单 -->
                    <form action="/staff/login/logon" id="form2" method="POST" style="position: relative;">
                        {{ csrf_field() }}
                        <input type="text" id="phone" placeholder="请输入账号/手机号" value="" name="phone" style="background: rgba(255,255,255,0.08); border: 1px solid #707070;" />
                        <p id="p6" style="  font-size: 0.9em;   position: absolute; top: 0.5em; left: 21.2em; width:25em;color:#999;"></p>
                        <input type="password" id="pwd" placeholder="请输入密码" name="pwd" style="background: rgba(255,255,255,0.08); border: 1px solid #707070;"/>
                        <p id="p7" style=" font-size: 0.9em; position: absolute; top: 4.7em; left: 21.2em; width:40em;color:#999;"></p>
                        <!-- 滑块 -->
                        <div id="slider2" class="slider" style=" background: rgba(255,255,255,0.08);  border-radius: .7em; margin-top: 0.4em;width: 25rem;height: 3em;"></div>
                        <button type="button" id="btn" style="border: 1px solid #707070; width: 25rem; height: 64px; font-size: 1.2em;margin-top: .8em" >登陆</button>
                        @if(session('msg'))
                            @if(session('msg')=='登录失败！')
                                <script type="text/javascript">
                                    $("#btn2").html("登陆失败！");
                                    $("#inp5,#inp6").click(function(){
                                        $("#btn2").html("登陆");
                                    });
                                </script>
                            @endif
                        @endif
                    </form>

                    <!-- 忘记密码表单 -->
                    <form action="/admin/login/forget" id="form3" method="POST"  style="position: relative;" class="hide" onsubmit="return fn2()">
                        {{ csrf_field()}}
                        <input type="number" id="inp7" placeholder="请输入手机号"  name="mobile" style="background: rgba(255,255,255,0.08);    border: 1px solid #707070;" />
                        <p id="p8" style="  font-size: 0.9em;   position: absolute; top: 0.55em; left: 21.2em; width:25em;color:#999;"></p>
                        <input type="password" id="inp10" placeholder="验证码" name="code" style="background: rgba(255,255,255,0.08);  width: 12.5em;  border: 1px solid #707070;" />
                        <input  id="pn11" type="button" style="   background: rgba(255,255,255,0.08); position: absolute; top: 3.8em; left: 12.8em; width:6em;height:3em;line-height: 3em; border: 1px solid #707070;border-radius: .7em;color: #707070 " value="获取验证码"/>
                        <p id="p11" style="  font-size: 0.9em;   position: absolute; top: 4.6em; left: 21.2em; width:25em;color:#999;"></p>
                        <button  id="btn3" style="border: 1px solid #707070;width: 25rem;height: 64px;font-size: 1.2em;margin-top: .9em;" >重置密码</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/pc/login/js/TweenLite.min.js"></script>
<script src="/pc/login/js/EasePack.min.js"></script>
<script src="/pc/login/js/demo-1.js"></script>
<script src="/staff/login/js/login.js"></script>

</body>
<script>
    (function(w){if(!("WebSocket"in w&&2===w.WebSocket.CLOSING)){var d=document.createElement("div");d.className="browsehappy";d.innerHTML='<div style="width:100%;height:100px;font-size:20px;line-height:100px;text-align:center;background-color:#E90D24;color:#fff;margin-bottom:40px;">\u4f60\u7684\u6d4f\u89c8\u5668\u5b9e\u5728<strong>\u592a\u592a\u65e7\u4e86</strong>\uff0c\u592a\u592a\u65e7\u4e86 <a target="_blank" href="http://www.google.cn/chrome/browser/desktop/index.html" style="background-color:#31b0d5;border-color: #269abc;text-decoration: none;padding: 6px 12px;background-image: none;border: 1px solid transparent;border-radius: 4px;color:#FFEB3B;">\u7acb\u5373\u5347\u7ea7</a></div>';var f=function(){var s=document.getElementsByTagName("body")[0];if("undefined"==typeof(s)){setTimeout(f,10)}else{s.insertBefore(d,s.firstChild)}};f()}}(window));
    // 选项卡切换页面
    msgcode = '';
    $(function(){
        $('#qh li').click(function(){
            $(this).removeClass("ys ").siblings().addClass("ys");
            var index=$(this).index(); //获取被按下按钮的索引值
            $("#dq form").eq(index).show(1000).siblings().hide(1000);
        });
        $("#slider1").slider({
            callback: function(result) {
                $("#result1").text(result);
            }
        });
        $("#slider2").slider({
            callback: function(result) {
                $("#result1").text(result);
            }
        });
        $("#slider3").slider({
            callback: function(result) {
                $("#result1").text(result);
            }
        });

        // 点击登录表单移除表单之前已经选过的样式
        $("#dl2").click(function(){
            $("#inp5,#inp6").val("");
            $("#p6,#p7").text("");
            $("#slider2").slider("restore");
        });

        // 点击忘记表单移除表单之前已经选过的样式
        $("#wj2").click(function(){
            $("#inp7,#inp10").val("");
            $("#p8,#p11").text("");
        });
    });

</script>
</html>


